<template>
  <div class="MyRegister page" ref="webview">
    <van-nav-bar title="运营中心" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="content">
      <div v-if="queryInfo.canApplyLevelValue == 0" class="hint">
        <span v-if="queryInfo.canApplyLevelValue == 0">{{'温馨提示: ' + queryInfo.canApplyMessage}}</span>
      </div>
      <template v-if="isAddType">
        <van-field v-model="form.memberNo" :disabled="true" label="会员编号" input-align="right" clearable
          placeholder="请输入会员编号" />
        <van-field v-model="form.nickname" label="昵称" :disabled="true" input-align="right" clearable
          placeholder="输入昵称" />
        <div class="bk active" @click="openAction" v-if="!btnType">
          <span class="label">运营中心级别</span>
          <div class="name" :class="{active: levelName}">{{levelName || '选择'}}</div>
        </div>
        <div class="bk active" v-else>
          <span class="label">运营中心级别</span>
          <div class="name">{{levelName || '选择'}}</div>
        </div>
        <div class="bk active van-hairline--bottom" @click="isAreaList=true" v-if="addressType!=0">
          <span class="label">区域</span>
          <div class="name" v-if="addressType == 3" :class="{active: levelName}">
            {{form.provName && form.cityName && form.areaName ? form.provName + ' ' + form.cityName + ' ' + form.areaName : '选择'}}
          </div>
          <div class="name" v-else-if="addressType == 2" :class="{active: levelName}">
            {{form.provName && form.cityName ? form.provName + ' ' + form.cityName : '选择'}}</div>
          <div class="name" v-else-if="addressType == 1" :class="{active: levelName}">
            {{form.provName ? form.provName : '选择'}}</div>
          <div class="name" v-else-if="addressType == 0">选择</div>
        </div>
        <div class="bk active van-hairline--top-bottom" v-else>
          <span class="label">区域</span>
          <div class="name">选择</div>
        </div>
        <div class="van-hairline--top">
          <van-field v-model="form.remark" rows="1" autosize label="报单备注" type="textarea" placeholder="请输入备注"
            maxlength="200" show-word-limit :disabled="btnType" />
        </div>
      </template>
      <template v-else>
        <div class="textInfo">您已经成为运营中心</div>
        <div class="bk van-hairline--bottom">
          <span class="label">会员编号</span>
          <div class="sname">{{queryInfo.memberNo}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">昵称</span>
          <div class="sname">{{queryInfo.memberNo}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">区域</span>
          <div class="sname">{{queryInfo.provName + ' ' + queryInfo.cityName + ' ' + queryInfo.areaName}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">申请日期</span>
          <div class="sname">{{queryInfo.createTime}}</div>
        </div>
        <div class="bk van-hairline--bottom">
          <span class="label">备注</span>
          <div class="sname">{{queryInfo.remark}}</div>
        </div>
      </template>
      <div class="addCard" v-if="isAddType">
        <van-button class="btn" round :loading="isLoading" @click.native="submitCapplyMessage" :disabled="btnType">
          申请报单资格</van-button>
      </div>
    </div>
    <van-action-sheet v-model="isAction" :round="false " @select="selectAction" cancel-text="取消" :actions="levelList"
      description="级别 " />
    <van-popup v-model="isAreaList" position="bottom" get-container="#app">
      <van-picker show-toolbar title="区域选择" :columns="areaLists" @cancel="isAreaList=false" :loading="pickerLoading"
        @change="onChangeDetail" @confirm="confirmArea" />
      <!-- <van-area :area-list="areaList" @change="onChangeDetail" @confirm="confirmArea" @cancel="isAreaList=false"
        :value="form.areaCode" :columns-placeholder="['请选择', '请选择', '请选择']" :columns-num="addressType" /> -->
    </van-popup>
  </div>
</template>
<script>
import areaList from '@/plugins/areaList';
import { mapGetters } from 'vuex';
export default {
  name: 'declaration',
  data () {
    return {
      areaList,
      isLoading: false,
      pickerLoading: false,
      isAction: false,
      isAreaList: false,
      levelName: '',
      btnType: false,
      areaLists: [],
      form: {
        // memberNo: '',
        // nickname: '',
        recNo: '',
        // parentName: '',
        levelValue: 1,
        // theArea: '1',
        provCode: '',
        cityCode: '',
        areaCode: '',
        remark: ''
      },
      area: {
        provName: '',
        cityName: '',
        areaName: '',
        provCode: '',
        cityCode: '',
        areaCode: ''
      },
      queryInfo: {},
      list: [],
      addressType: 0,
      levelList: []
    };
  },
  computed: {
    isAddType () {
      return parseInt(this.$route.query.type) === 1;
    },
    ...mapGetters(['level'])
  },
  created () {
    this.sCapplyMessage();
  },
  methods: {
    // index 当前省市区的索引，用当前索引去更新数据 例：areaLists[{values:[{'text':'省'}]},{values:[{'text':'市'}]},{values:[{'text':'区'}]}]
    // levelValue 级别
    // pid  当前获取数据的id
    // callback 回调函数 用于将数据获取完成后去取值
    areaSelect (index, levelValue, pid, callback) {
      var options = {
        lv: levelValue,
        pid: pid || 0
      };
      this.areaLists.splice(index, 1, { values: [] });
      this.$API.user.areaSelect(options).then(res => {
        if (!res.code) {
          this.areaLists[index].values = res.data;
          var itemArr = [];
          res.data.map(item => {
            if (!item.disabled) {
              itemArr.push(item);
            }
          });
          callback && callback(itemArr[0]);
        }
      });
    },
    selectAction (data) {
      let self = this;
      this.isAction = false;
      this.levelName = data.name;
      this.areaLists = [];
      if (data.value === 1) {
        self.addressType = 3;
        this.areaLists = [];
        this.areaSelect(0, 1, 0, (prov) => {
          this.areaSelect(1, 1, prov.id, (city) => {
            this.areaSelect(2, 1, city.id, (area) => {
              this.outTime(prov, city, area);
            });
          });
        });
      } else if (data.value === 2) {
        self.addressType = 2;
        this.areaSelect(0, 2, 0, (prov) => {
          this.areaSelect(1, 2, prov.id, (city) => {
            this.outTime(prov, city);
          });
        });
      } else if (data.value === 3) {
        self.addressType = 1;
        this.areaSelect(0, 3, 0, (prov) => {
          this.outTime(prov);
        });
      }
      this.form.levelValue = data.value;
      this.form.provCode = '';
      this.form.cityCode = '';
      this.form.areaCode = '';
    },
    openAction () {
      this.isAction = true;
      this.form.provCode = '';
      this.form.cityCode = '';
      this.form.areaCode = '';
      this.form.provName = '';
      this.form.cityName = '';
      this.form.areaName = '';
    },
    confirmArea () {
      if (this.addressType === 3) {
        if (!this.area.provName) {
          this.$toast('请选择省');
          return;
        }
        if (!this.area.cityName) {
          this.$toast('请选择市');
          return;
        }
        if (!this.area.areaName) {
          this.$toast('请选择区');
          return;
        }
        this.form.provName = this.area.provName;
        this.form.cityName = this.area.cityName;
        this.form.areaName = this.area.areaName;
        this.form.provCode = this.area.provCode;
        this.form.cityCode = this.area.cityCode;
        this.form.areaCode = this.area.areaCode;
      } else if (this.addressType === 2) {
        if (!this.area.provName) {
          this.$toast('请选择省');
          return;
        }
        if (!this.area.cityName) {
          this.$toast('请选择市');
          return;
        }
        this.form.provName = this.area.provName;
        this.form.cityName = this.area.cityName;
        this.form.provCode = this.area.provCode;
        this.form.cityCode = this.area.cityCode;
      } else if (this.addressType === 1) {
        if (!this.area.provName) {
          this.$toast('请选择省');
          return;
        }
        this.form.provName = this.area.provName;
        this.form.provCode = this.area.provCode;
      }
      console.log(this.form);
      this.isAreaList = false;
    },
    outTime (province, cityData, areaData) {
      // console.log(province, city.area_key, area);
      this.area.provName = province && province.text;
      this.area.cityName = cityData && cityData.text;
      this.area.areaName = areaData && areaData.text;
      this.area.provCode = province && province.area_key;
      this.area.cityCode = cityData && cityData.area_key;
      this.area.areaCode = areaData && areaData.area_key;
      setTimeout(() => {
        this.pickerLoading = false;
      }, 500);
    },
    onChangeDetail (el, data, index) {
      var province = data[0] && data[0];
      var city;
      var area;
      var outTime = (provinceData, cityData, areaData) => {
        province = provinceData || (data[0] && data[0]); // 这里必须要加省，要不然数据会有问题
        city = cityData || (data[1] && data[1]);
        area = areaData || (data[2] && data[2]);
        this.outTime(province, city, area);
      };
      // addressType: 1  省
      // addressType：2  市
      // addressType：3  区
      // this.form.levelValue 当前显示级别
      // index：0 省列  index: 1 市列  index:2 区列
      // 2个参数要配合使用才有效果
      // 当前级别为(省\市\区)，直接返回选择的数据
      if ((!index && this.form.levelValue === 3) || (index === 1 && this.form.levelValue === 2) || (index === 2 && this.form.levelValue === 1)) {
        outTime();
        return;
      } else {
        this.pickerLoading = true;
      }
      // 选择省和市的数据获取
      if (!index && (this.addressType === 2 || this.addressType === 3)) {
        this.areaSelect(1, this.form.levelValue, province.id, (city) => {
          if (this.addressType === 3) {
            this.areaSelect(2, this.form.levelValue, city.id, (area) => {
              outTime(null, city, area);
            });
          } else {
            outTime(null, city, null);
          }
        });
      } else {
        outTime();
      }
      // 选择市的时候读取区县数据
      if (index === 1 && (this.addressType === 2 || this.addressType === 3)) {
        // 等于省时异步获取市数据
        if (this.addressType === 3) {
          this.areaSelect(2, this.form.levelValue, city.id, (area) => {
            // area
            outTime(null, null, area);
          });
        } else {
          outTime();
        }
      }
    },
    submitCapplyMessage () {
      // if (!this.form.scName) {
      //   this.$toast('运营中心编码不能为空');
      //   return;
      // }
      this.isLoading = true;
      this.$API.user.sCapplyMessage(this.form, '').then(res => {
        if (!res.code) {
          setTimeout(() => {
            this.$router.replace({ path: '/prompt', query: { type: 1 } });
          }, 200);
          this.isLoading = false;
        } else {
          res.message && this.$toast(res.message);
          this.isLoading = false;
        }
      });
    },
    sCapplyMessage () {
      this.$toast.loading({ duration: 0 });
      this.$API.user.sCapplyMessage({}, 'message').then(res => {
        if (!res.code) {
          console.log(this.isAddType);
          this.queryInfo = res.data;
          if (this.isAddType) {
            this.form.memberNo = this.queryInfo.memberNo;
            this.form.nickname = this.queryInfo.nickname;
            this.form.recNo = this.queryInfo.recNo;
            // this.form.theArea = this.queryInfo.theArea + '';
            this.form.levelValueName = this.queryInfo.levelName;
            this.form.parentName = this.queryInfo.parentName;
            let obj = {};
            this.queryInfo.levelList.map(item => {
              if (this.queryInfo.canApplyLevelValue === 1) {
                obj = {
                  name: item.levelName,
                  value: item.levelValue,
                  id: item.id
                };
                this.levelList.push(obj);
              } else if (this.queryInfo.canApplyLevelValue === 2) {
                if (item.levelValue !== 1) {
                  obj = {
                    name: item.levelName,
                    value: item.levelValue,
                    id: item.id
                  };
                  this.levelList.push(obj);
                }
              } else if (this.queryInfo.canApplyLevelValue === 3) {
                if (item.levelValue === 3) {
                  obj = {
                    name: item.levelName,
                    value: item.levelValue,
                    id: item.id
                  };
                  this.levelList.push(obj);
                }
              }
            });
            console.log(this.levelList);
            if (this.queryInfo.canApplyLevelValue === 0) {
              this.btnType = true;
              console.log(this.btnType);
              // this.addressType = 0;
            }
          }
        } else {
          res.message && this.$toast(res.message);
          this.isLoading = false;
        }
        this.$toast.clear();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.MyRegister {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    .textInfo {
      background-color: #f5f5f5;
      padding: 25px 44px;
      font-size: 28px;
    }
    .hint {
      height: 80px;
      line-height: 80px;
      background: #fff;
      margin: 10px 0;
      padding: 0 0.4rem;
      color: #e90a0a;
    }
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 40px;
    right: 40px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
      border: none;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
